<!--听音乐主页面-->
<template>
    <div class="page-container">
        <div class="page-box-style">
            <div class="search-input">
                <el-input placeholder="搜索音乐、歌手、歌词、用户" v-model="input" class="input-with-select" clearable>
                    <el-button slot="append" icon="el-icon-search" type="primary" @click="search"></el-button>
                </el-input>
            </div>
            <div class="music-box">
                <div v-for="(item,index) in MusicData" :key="index" class="each-item-list"
                     :style="getStyleObject(index)">
                    <div @dblclick="playMusic(item)" class="each-item" @click="showPlayImg(index)">
                        <div style="flex: 2;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;">
                            {{item.name}}
                        </div>
                        <div style="flex: 1;display: flex;justify-content: flex-start;align-items: center;">
                            <img src="../../assets/imgs/play.png" style="width: 20px;" @click="playMusic(item)"
                                 v-show="isPlayImg===index"/>
                        </div>
                        <div style="flex: 2">{{item.artists[0].name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Service2 from '../../common/Service2';

    export default {
        name: "ListenMusic",
        data() {
            return {
                input: "",
                MusicData: [],
                isPlayImg: -1
            }
        },
        computed: {
            /**
             * 隔行变背景色
             * @returns {Function}
             */
            getStyleObject() {
                return (index) => {
                    if (index % 2 === 0) {
                        return {
                            backgroundColor: "#f7f7f7",
                        }
                    } else if (index % 2 === 1) {
                        return {
                            backgroundColor: "#fff",
                        }
                    }
                }
            },
        },
        methods: {
            showPlayImg(index) {
                this.isPlayImg = index;
            },
            search() {
                this.isPlayImg = -1;
                if (this.input === "") {
                    return;
                }
                Service2.base.search(this.input).then(data => {
                    // console.log(data.result.songs);
                    this.MusicData = data.result.songs;
                })
            },
            playMusic(item) {
                // console.log(item);
                // album:"专辑"alias:"别名"artists:"艺术家"
                Service2.base.playMusic(item.id).then(data => {
                    // console.log(data)
                    if (data.data[0].code === 200) {
                        Service2.base.lyric(item.id).then(data2 => {
                            console.log(data2)
                            let setMusic = {
                                name: item.name,
                                url: data.data[0].url,
                                artist: item.artists[0].name,
                                lrc: data2.lrc.lyric,
                                id: item.id
                            };
                            this.$store.dispatch("setMusic", setMusic);
                        });
                    } else {
                        this.$message.error('该歌曲不可以播放');
                    }
                })
            }
        }
    }
</script>
<style>
    .music-box::-webkit-scrollbar {
        width: 8px;
        height: 1px;
    }

    /*滚动条滑块*/
    .music-box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #dddddd;
    }

    /*滚动条轨道*/
    .music-box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
        border-radius: 10px;
    }
</style>
<style scoped lang="scss">
    .page-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .page-box-style {
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            .search-input {
                width: 100%;
                height: 50px;
            }
            .music-box {
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: auto;
                .each-item-list {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    &:hover {
                        background-color: #e9e9e9 !important;
                    }
                    .each-item {
                        display: flex;
                        color: #a6a4a4;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>